import {Component, OnInit, ViewEncapsulation, ViewChild, OnDestroy} from '@angular/core';

import {Subject} from "rxjs/Subject";
import {SeedInfiniteScroll} from "@shared/components/infinite-scroll/seed-infinite-scroll/seed-infinite-scroll.component";
import {SignUpService} from "@sign-up/sign-up.service";
import {ActivatedRoute, Router} from "@angular/router";
import {ToolsService} from "@shared/service/tools/tools.service";
import {MatchSignUpData, MatchSignupFieldsResp} from "@interface/index";



@Component({
  selector: 'multiple-member-competition',
  templateUrl: './multiple-member-match.component.html',
  styleUrls: ['./multiple-member-match.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SignUpMultipleMatchComponent implements OnInit, OnDestroy {


  public firstLoad = true;
  public signing = false;
  public addition: MatchSignupFieldsResp[];
  public params = new MatchSignUpData();
  private ngUnsubscribe: Subject<any> = new Subject<any>();

  @ViewChild(SeedInfiniteScroll) infiniteScroll;

  constructor(private signUpService: SignUpService,
              private route: ActivatedRoute,
              private toolsService: ToolsService,
              private router: Router) {

  }

  getData() {
    if (this.firstLoad) {
      this.toolsService.showLoading();
    }
    this.signUpService.getDynamicMatchInfo(this.params.matchId, this.params.orderNumber)
      .takeUntil(this.ngUnsubscribe)
      .subscribe((res) => {
        this.toolsService.hideLoading();
        if (res.result === '0') {
          if (res.data.matchSignupFields.length > 0) {
            this.addition = res.data.matchSignupFields;
          }
        }
      });
  }

  sign(chooseArr) {
    if (this.signing) {
      return;
    }
    this.signing = true;
    const data = this.signUpService.getPerasonalSignData(this.params);

    data['matchSignDataReqList'] = chooseArr;
    this.toolsService.showLoading();
    this.signUpService
      .toSign(data)
      .subscribe((res) => {
        this.signing = false;
        this.toolsService.hideLoading();
        if (res['result'] === '0') {
          // if (res.data.orderStatus === 2) {
          //   this.router.navigate(['/payment/result'], {queryParams: {mchOrderNumber: this.params.orderNumber}});
          // } else {
          //   this.router.navigate(['/payment'], {queryParams: {orderNumber: this.params.orderNumber}});
          // }
          this.signUpService.goToPayOrResult(res.data.orderStatus, this.params.orderNumber);
        } else if (res.result === '9012') {
          this.toolsService.showToast('该商品已下架');
        } else if (res.result === '9064') {
          this.toolsService.showToast(`您已购买了${res.data.orderNum}位名额, 请选择${res.data.orderNum}位参赛人`);
        } else if (res.result === '13002') {
          this.toolsService.showToast('提交失败，请查看订单状态是否正常');
        } else if (res.result === '9092') {
          const msgData = this.signUpService.getAgeLimitMsg(res.data);
          const temp = {
            title: `参赛人年龄不符 ${msgData.minAge} ~ ${msgData.maxAge} 岁`,
            message: `报名人: ${msgData.memberStr}`
          };
          this.toolsService.present(temp);
        } else if (res.result === '9064') {  // 参赛人员与购买的人员数量不符
          this.toolsService.present(`请选择${res.data.orderNum}位参赛人`);
        } else if (res.result === '9067') {  // 用户已报名了;
          const str = this.signUpService.getHasSignMemberStr(res.data);
          const temp = {
            title: '用户已报名',
            message: str
          };
          this.toolsService.present(temp);
        } else {
          this.toolsService.showToast(res.msg);
        }
      });
  }


  ngOnInit() {
    this.toolsService.setTitle('报名');
    this.route.queryParams.subscribe((param) => {
      const params = this.params;
      // this.params = {
      //   matchId: param['matchId'],
      //   orderNumber: param['orderNumber'],
      //   channelsId: param['channelsId'],
      //   groupType: param['goodsType']
      // };
      params.channelsId = param['channelsId'];
      params.matchId = param['matchId'];
      params.groupType = param['goodsType'];
      params.orderNumber = param['orderNumber'];
    });
    this.getData();
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

}
